<extend name="Public/base"/>
<block name="style">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <link href="__STATIC__/select2/select2.css" rel="stylesheet" type="text/css" />
    <link href="__STATIC__/select2/select2-bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="__STATIC__/select2/select2.js"></script>
</block>
<block name="body">
    <div class="main-title">
        <h2>相册[{$info.title}]</h2>
        <p><span><a href="{:U('edit?id='.$info['id'])}">编辑</a></span></p>
    </div>
    <div class="album-info">
        <p><span>所属分类：</span><span>{$info.cat_id}</span></p>
    </div>

    <div class="cf" id="upload-box">
        <form action="{:U()}" id="upload-form" method="post" class="form-horizontal">
            <div id="upload-area">
                <div class="upload-img-box">
                </div>
                <input type="file" id="upload_album_picture">
                <div class="picture-show">
                    <p>点击选择图片按钮上传新图片</p>
                    <p>click button above upload</p>
                </div>
            </div>
            <div class="meta-area">
                <div class="cf">
                <div class="form-item meta-left">
                    <label class="item-label">标题：</label>
                    <div class="controls">
                        <input type="text" name="title" placeholder="图片标题"/>
                    </div>
                    <label class="item-label">作者：</label>
                    <div class="controls">
                        <input type="text" name="author" placeholder="图片作者"/>
                    </div>
                    <label class="item-label">关键字：</label>
                    <div class="controls">
                        <input type="text" name="keywords" placeholder="图片关键字"/>
                    </div>
                </div>
                <div class="form-item meta-right">
                    <label class="item-label">描述：</label>
                    <div class="controls">
                        <textarea name="description" id="pic-description" cols="30" rows="10"></textarea>
                    </div>
                </div>
                </div>
                <div class="cf">
                    <button class="btn submit-btn ajax-post hidden" id="submit" type="submit" target-form="form-horizontal">确 定</button>
                    <button class="btn btn-danger" id="reset" type="reset" >清 空</button>
                    <a id="getLastMeta" class="btn btn-default" href="">提取上一次数据</a>
                    <input type="hidden" name="pic_id" value="0"/>
                    <input type="hidden" name="album_id" value="{$info.id}"/>
                </div>

            </div>

        </form>
    </div>
    <script type="text/javascript">
        //上传图片
        /* 初始化上传插件 */

        $("#upload_album_picture").uploadify({
            "height"          : 30,
            "swf"             : "__STATIC__/uploadify/uploadify.swf",
            "fileObjName"     : "download",
            "buttonText"      : "选择图片",
            "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
            "width"           : 120,
            'removeTimeout'	  : 1,
            /*限制上传类型和大小*/
            'fileTypeExts'	  : '*.jpg; *.png;*.JPG; *.PNG;',
            'fileSizeLimit' :'1024KB',
            "onUploadSuccess" : uploadAlbumPicture,
            'onFallback' : function() {
                alert('未检测到兼容版本的Flash.');
            }
        });

        function uploadAlbumPicture(file, data){
            var data = $.parseJSON(data);
            var src = '';
            if(data.status){
                src = data.url || '__ROOT__' + data.path
                var $input = $('input[name="pic_id"]');
                var id = $input.val();
                var $showBox = $(".picture-show");
                if(id == 0){
                    id = data.id;
                    $showBox.empty();
                }   else {
                    id += ','+data.id;
                }
                $input.val(id);
                $showBox.append(
                        '<img width="100px" height="50" src="' + src + '"/>'
                );

            } else {
                updateAlert(data.info);
                setTimeout(function(){
                    $('#top-alert').find('button').click();
                    $(that).removeClass('disabled').prop('disabled',false);
                },1500);
            }

        }

    </script>
    <hr/>
    <div class="cf">
        <button class="btn disabled ajax-post" target-form="ids" >移 动</button>
        <button class="btn confirm ajax-post" target-form="ids" url="{:U('deletePic')}">删 除</button>
        <span>Tips:点击标题看大图</span>
    </div>
    <div class="cf">
        <volist name="_list" id="vo">
            <div class="album-image-box">
                <div class="image-pic">
                    <div class="check-box uncheck"></div>
                    <img src="{$vo.pic_id|get_cover='path'}" alt="{$vo.title}"/>
                    <input class="ids hidden" type="checkbox" name="ids[]" value="{$vo.id}" />
                   </div>
                <div class="image-title">
                    <a class="image-view" title="点标题看大图" href="#msgModal" data-toggle="modal">标题：{$vo.title}</a>
                </div>
                <hr/>
                <div class="image-meta">
                    <p>关键字：{$vo.keywords}</p>
                    <p class="image-description">{$vo.description}</p>
                    <hr/>
                    <p class="operation-btn-box">
                        <if condition="$vo['pic_id'] eq $category['cover_id']">
                            <a data-id="{$vo.pic_id}" class="setCover btn btn-onechat-default btn-onechat-small disabled" href="">设为封面</a>
                        <else />
                            <a data-id="{$vo.pic_id}" class="setCover btn btn-onechat-default btn-onechat-small" href="">设为封面</a>
                        </if>
                        <a class="deletePicture btn btn-onechat-default btn-onechat-small ajax-get confirm" href="{:U('deletePic',array('ids'=>$vo['id']))}">删除</a>

                    </p>

                </div>
            </div>
        </volist>
    </div>
    <!-- 分页 -->
    <div class="page cf">
        {$page}
    </div>
</block>

<block name="script">
    <script>
        $(document).ready(function(){
            var $Images = $(".image-pic");
            /* 为图片框设置高度和宽度 */
            $Images.each(function(){
                var width = $(this).find("img").width();
                var height = $(this).find("img").height();
                $(this).css({'width':width+"px",'height':height+"px"});
            });

            /* 点击选中图像 */
            $Images.click(function(){
                $(this).find('.check-box').toggleClass('uncheck').toggleClass('checked');
                var $CheckBox = $(this).find("input[name='ids[]']");
                var checked =  $CheckBox.attr('checked');
                if(checked){
                    $CheckBox.attr('checked',false);
                }else{
                    $CheckBox.attr('checked',true);
                }
            });

            /* 点击标题查看图像 */
            $(".image-view").click(function(){
                var url = $(this).parents('.album-image-box').find("img").attr('src');
                $("div#msgModal").html('<img src="'+url+'" width="100%" >');
            });

            /* 点击获取上一次图片的描述 */
            $("#getLastMeta").click(function(event){
                event.preventDefault();
                $.get('{:U("detail",array("id"=>$info["id"],"getMeta"=>true))}',
                        function(data){
                        if(data.status == 0){
                            alert(data.info);
                        }else{
                            $("input[name='title']").val(data.meta.title);
                            $("input[name='author']").val(data.meta.author);
                            $("input[name='keywords']").val(data.meta.keywords);
                            $("textarea[name='description']").text(data.meta.description);
                        }
                });
            });

            /* 设置图片为相册封面 */
            $(".setCover").click(function(event){
                event.preventDefault();
                var cover_id = $(this).attr('data-id');
                var url = '__ROOT__/admin.php?s=/Album/detail/id/{$info["id"]}/setCover/'+cover_id+'.html';
                $.get(url,
                        function(data){
                                alert(data.info);
                        });
            });

        });
    </script>
</block>